<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1"
                         @change="handleChange"
                         :options="option1" />
      <van-dropdown-item v-model="value2"
                         @change="handleChange"
                         :options="option2" />
    </van-dropdown-menu>
    <van-collapse v-model="activeNames">
      <van-collapse-item title="标题1"
                         name="1">内容</van-collapse-item>
      <van-collapse-item title="标题2"
                         name="2">内容</van-collapse-item>
      <van-collapse-item title="标题3"
                         name="3">内容</van-collapse-item>
    </van-collapse>
    <van-panel title="选中项详情"
               status="状态">
      <van-cell title="单元格"
                value="内容" />
      <div>test</div>
    </van-panel>
    <van-divider />
    <van-pagination v-model="currentPage"
                    :total-items="24"
                    :items-per-page="5" />
  </div>
</template>
<script>
import {
  DropdownMenu,
  DropdownItem,
  Notify,
  Collapse,
  CollapseItem,
  Panel,
  Cell,
  Divider,
  Pagination
} from 'vant';
export default {
  name: 'About',
  components: {
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Panel.name]: Panel,
    [Cell.name]: Cell,
    [Divider.name]: Divider,
    [Pagination.name]: Pagination
  },
  data () {
    return {
      currentPage: 1,
      value1: 0,
      value2: 'a',
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
      activeNames: ['1']
    }
  },
  methods: {
    handleChange () {
      Notify({
        type: 'warning',
        message: '菜单选中项变化了'
      })
    }
  }
}
</script>